<template>
    <div id="article-content">
        <el-row :gutter="10">
            <!-- 文章描述 -->
            <el-col  :lg="{span:16}" :xs="23"  class="description" v-for="content in contentlist">
                <div class="title">{{content['title']}}</div>
                <div class="author-info">
                    <!-- 头像 -->
                    <div class="block"> 
						<img src="../../assets/admin.jpg" alt="" class = "img1">
                        <!--el-avatar :size="50" v-if="content['adminName']" :src="'http://localhost:8080/img/admin/'+content['adminName']+'.jpg'"></el-avatar>-->
                    </div>
                    <!-- 用户信息 -->
                    <div class="info">
                        <div class="author-name">{{content['adminName']}}</div>
                        <!-- 文章信息 -->
                        <div class="infomation">
                            <div class="apply-time">{{content['time']}}</div>
                            <div class="read-num"><i class="iconfont icon-aixin_shixin"></i>&nbsp{{content['goodNum']}}</div>
                        </div>
                    </div>
                </div>
            </el-col>
			<el-col  :lg="0" :xs="23" class = "ele">
					<el-button type="success" icon="el-icon-check" circle @click="addgood"></el-button>
					<el-button type="warning" icon="el-icon-star-off" circle @click="addCollection"></el-button>
			</el-col>
			<el-col  :xs="0">
				<!-- 左侧点赞按钮 -->
				<div class="good" @click="addgood"><i class="iconfont icon-dianzan"></i></div>
				<!-- 收藏按钮 -->
				<div class="collect" @click="addCollection"><i class="iconfont icon-collection-b"></i></div>
			</el-col>
            <!-- 文章内容 -->
            <el-col :lg="{span:16}" :xs="23"  class="pcontent" v-for="content in contentlist">
                <mavon-editor
                        :value="content['content']"
                        :subfield = "false"
                        :defaultOpen = "'preview'"
                        :toolbarsFlag = "false"
                        :ishljs="true"
                        :boxShadow="true"
                        :codeStyle="codeStyle"
                        :transition="false">
                </mavon-editor>
            </el-col>
            <!--  侧边栏 -->
            <el-col :lg="{span:6}" :xs="0"  v-for="content in contentlist">
                <div  class="article-side">
                    <!-- 作者信息 -->
                    <div class="author-info">
                        <!-- 头像 -->
                        <div class="block">
							
                            <img src="../../assets/admin.jpg" alt="" class = "img1">
                        </div>
                        <!-- 用户信息 -->
                        <div class="info">
                            <div class="author-name">{{content['adminName']}}</div>
                        </div>
                    </div>
                    <!-- 用户其他文章 -->
                    <div class="other-article">
                        <ul>
                            <li v-for="oneRecommend in recommendList">
                                <div>{{oneRecommend['title']}}</div>
                                <div class="visit-num"><i class="iconfont icon-aixin_shixin"></i>&nbsp{{oneRecommend['goodNum']}}</div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="recommend-article">
                    <div><i class="iconfont icon-shuqian"></i>推荐阅读</div>
                    <ul>
                        <li v-for="onepop in mostPopList">
                            <div>{{onepop['articleID']}}:{{onepop['title']}}</div>
                            <div class="visit-num"><i class="iconfont icon-aixin_shixin"></i>&nbsp{{onepop['goodNum']}}</div>
                        </li>
                    </ul>
                </div>
            </el-col>
			
			<el-col :lg="0" :xs="23" class="comment-space">
			
				<el-col :lg="0" :xs="23" >
				    <div>
				        <div><i class="iconfont icon-shuqian"></i>推荐阅读</div>
				        <ul>
				            <li v-for="onepop in mostPopList">
				                <div>{{onepop['articleID']}}:{{onepop['title']}}</div>
				                <div class="visit-num"><i class="iconfont icon-aixin_shixin"></i>&nbsp{{onepop['goodNum']}}</div>
				            </li>
				        </ul>
				    </div>
				</el-col>
			</el-col>

            <!-- 发表评论 -->
            <el-col :lg="{span:16}" :xs="23" class="gcomment">
                <give-comment :receive-url="receiveUrl" :give-comment="giveComment" @send-success="sendSuccess"></give-comment>
            </el-col>
            <!-- 评论区 -->
            <el-col :lg="{span:16}" :xs="23" class="comment-space">
				<el-carousel :interval="4000" type="card" height="230px">
					<el-carousel-item :lg="{span:24}" :xs="18" class="show-comment" v-for="oneComment in allCommentList">
						<div class="block">
							<img src="../../assets/admin.jpg" alt="" class = "img1">
						</div>
						<div class="author-name">{{oneComment['userName']}}</div>
						<div class="apply-time">{{oneComment['supplyTime']}}</div>
						<div class="comment-content">{{oneComment['content']}}</div>
					</el-carousel-item>
				</el-carousel>

                <!-- 回到顶部按钮 -->
                <el-col :lg="{span:12,offset:6}" :xs="23" class="btn-top">
                    <div @click="backup"><i class="iconfont icon-up1"></i></div>
                </el-col>
            </el-col>
			

        </el-row>

    </div>
</template>

<script>
    import GiveComment from '../../components/givecomment/GiveComment'
    import axios from 'axios'
    export default {
        components: {GiveComment},
        name: "article-content",
        created(){
            if(window.localStorage.getItem('token')==''||window.localStorage.getItem('token')==undefined)
                this.$router.replace('/');
            window.document.body.style.backgroundColor='rgb(199, 219, 241)';
            this.requestForMessage();
        },
        beforeRouteLeave(to,from,next){
            window.document.body.style.backgroundColor='';
            next();
        },
        data(){
            return{
                articleID:'',
				res :'',
				numm:0,
				nummm:0,
				contentlist:[
					{ title : "我们的小康梦丨山海携手 小康梦圆", adminName : "USER",time : "2021-09-21" , goodNum : 23, 
					content : 	
					"<br/><table><tr><td bgcolor=#C0FF3E>Markdown:背景色的设置是按照十六进制颜色值：#C0FF3E</td></tr></table></br>"
					+"<table><tr><td bgcolor=#54FF9F>背景色的设置是按照十六进制颜色值：#54FF9F</td></tr></table>"
					+"<table><tr><td bgcolor=#D1EEEE>背景色的设置是按照十六进制颜色值：#D1EEEE</td></tr></table>"
					+"　　<br/>*上世纪九十年代*</br>"
					+"	  <br/>**在宁夏西海固地区考察的习近平**</br>"
					+"    <br/>***曾经这样说***</br>"
					+"	  <br/>~~一方水土养活不了一方人~~</br>"						
					}
				],
                codeStyle:'gruvbox-light',
                headUrl:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
				oneComment:{
					'userName':'',
					'supplyTime':'',
					'content':''
				},
                allCommentList:[
					{ userName : "123", supplyTime : "2021-09-21" , content : "22223"},
					{ userName : "萧敬腾", supplyTime : "2021-07-09" , content : "今天下雨了没"},
					{ userName : "拉拉姐", supplyTime : "2021-09-21" , content : "摇摆摇摆"}
				],
                receiveUrl:'http://127.0.0.1:8080/articleContent/addcomment',
                giveComment:{
                  'message':'',
                  'userName':''
                },
				messageList:[],//全部数据
                floorIndex:'',
                adminName:'',
                recommendList:[
					{ articleID : 1, title : "中国派出军机" , goodNum : 152},
					{ articleID : 2, title : "西班牙点球败给意大利" , goodNum : 9999},
					{ articleID : 3, title : "澳大利亚" , goodNum : 444}
				],
                mostPopList:[
					{ articleID : 1, title : "维他奶下架" , goodNum : 999},
					{ articleID : 2, title : "鼠标键盘显示屏" , goodNum : 15},
					{ articleID : 3, title : "张三竟是我自己" , goodNum : 567}
				]
            }
        },
        methods:{
            requestForMessage(){
            },
            sendSuccess(giveComment){
                let message = giveComment['message'];
				let userName = giveComment['userName'];
				let oneComment = {'content':message,'userName':userName,'supplyTime':'2021-07-09'};
				
				this.allCommentList.push(oneComment);
				
            },

            backup(){
                let timer = setInterval(function(){
                    let osTop = document.documentElement.scrollTop || document.body.scrollTop;
                    let ispeed = Math.floor(-osTop / 5);
                    document.documentElement.scrollTop = document.body.scrollTop = osTop + ispeed;
                    this.isTop = true;
                    if(osTop === 0){
                        clearInterval(timer);
                    }
                },10);
            },
			            addCollection(){
							if(this.numm == 0)
			                    {this.$message("收藏成功！");
								this.numm = 1;}
							else
								this.$message("已经收藏,请勿重复收藏！");

			            },
						            addgood(){
						                    if(this.nummm == 0)
						                        {this.$message("点赞成功！");
						                    	this.nummm = 1;
												this.contentlist[0].goodNum++;}
						                    else
						                    	this.$message("已经点赞,请勿重复点赞！");

						            },
            limitLength(content,limit){
                if(content.length <= limit){
                    return content;
                }
                return content.substr(0,limit+1)+'...';
            }
        },
        computed:{
        }
    }
</script>

<style scoped>
#article-content{
    margin-left: 20px;
    margin-top: 20px;
}
.img1{
	width: 50px;
	height: 50px;
	border-radius:50px;
}
.description{
     background-color: white;
     padding: 0 5px 20px 5px;
     border-radius: 0 0 6px 6px;
     margin-top: 20px;
     margin-bottom: 0px;
	 border-bottom: 1px solid #eee;
	 border-top: 20px solid #ffffff;
	 border-left: 25px solid #ffffff;
}
.ele{
	margin-top: 20px;
	margin-bottom: 20px;
}
.title{
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 10px;
    color: #404040;
}
.author-info{
    display: flex;
}
.info{
    margin-left: 10px;
}
.author-name{
	font-size: 16px;
	margin-top: 10px;
text-shadow: 0 0 20px red; 
	text-align : center;
}
.apply-time{
    font-size: 12px;
    color: #000000;
    margin-top: 5px;
	text-align : center;
}
.article-side{
    padding: 20px;
    /*border: solid 1px #eee;*/
    margin-top: -155px;
    margin-left: 20px;
    background-color: white;
    border-radius: 6px;
}
.article-side .author-info{
    border-bottom: 1px solid #eee;
    height: 60px;
	margin-top: 20px;
	margin-bottom: 20px;
}
.other-article{
    margin-top: 20px;
}
.other-article ul li{
    font-size: 14px;
    color: #2D2D2D;
    margin-bottom: 20px;
}
 .article-side .author-name{
     font-size: 14px;
 }
.read-num{
    margin-left: 20px;
    margin-top: 5px;
}
.infomation{
    display: flex;
    margin-top: 5px;
}
 .infomation div{
     font-size: 13px;
     color: #969696;
 }
 .visit-num{
     font-size: 12px;
     color: #969696;
     margin-top: 5px;
 }
 .good{
     justify-content: center;
     width: 48px;
     height: 48px;
     font-size: 18px;
     border-radius: 50%;
     box-shadow: 0 2px 10px rgba(0,0,0,.05);
     background-color: #fff;
     color: rgb(150,150,150);
     text-align: center;
     line-height: 48px;
     position: fixed;
     top: 220px;
     right: 45px;
     cursor: pointer;
 }
 .good> .iconfont{
     font-size: 20px;
 }
 .show-comment{
     margin-top: 20px;
 }
 .show-comment .block{
     text-align: center;
     margin-top: 10px;
 }
 .comment-content{
    font-size: 20px;


     margin-top: 10px;
	 text-align : center;
	   font-family: lobster two;
	   color: #000000;
	   text-shadow: 0 8px 0 darken($blue, 9);
	   padding: 1em 2rem;
 }
 .comment-message{
     padding: 10px;
     border-bottom: 1px solid #eee;
 }
 .gcomment{
     background-color: white;
     padding: 0 5px 20px 5px;
     border-radius: 0 0 6px 6px;
     margin-top: 10px;
     margin-bottom: 0px;
 }
 .comment-space{
     background-color: white;
     padding: 0 5px 20px 5px;
     border-radius: 0 0 6px 6px;
     margin-top: 0px;
     margin-bottom: 50px;
 }
 .btn-top{
     text-align: center;
     margin-top: 20px;
 }
 .btn-top .iconfont{
     font-size: 30px;
     color: rgb(150,150,150);
     cursor: pointer;
 }
 .pcontent{
	 background-color: white;
     padding: 0 5px 20px 5px;
     border-radius: 0 0 6px 6px;
     margin-top: 0px;
     margin-bottom: 50px;

 }
 .recommend-article{
     margin-left: 20px;
     padding: 20px;
     margin-top: 10px;
     background-color: white;
     border-radius: 6px;
     position: absolute;
     width: 19.8%;
 }
 .recommend-article ul li{
     font-size: 14px;
     color: #2D2D2D;
     margin-bottom: 20px;
 }
 .recommend-article>div{
     margin-bottom: 10px;
 }
 .recommend-article>div .iconfont{
     margin-right: 5px;
 }
.infomation .iconfont{
    color: #e5e5e5;
}
.other-article .iconfont{
    color: #e5e5e5;
}
.recommend-article ul .iconfont{
    color:#e5e5e5;
}
 li{
     cursor: pointer;
 }
 .collect{
     justify-content: center;
     width: 48px;
     height: 48px;
     font-size: 18px;
     border-radius: 50%;
     box-shadow: 0 2px 10px rgba(0,0,0,.05);
     background-color: #fff;
     color: rgb(150,150,150);
     text-align: center;
     line-height: 46px;
     position: fixed;
     top: 300px;
     right: 45px;
     cursor: pointer;
     padding-right: 1px;
 }
 
   .el-col {
     border-radius: 4px;
   }
   .bg-purple-dark {
     background: #99a9bf;
   }
   .bg-purple {
     background: #d3dce6;
   }
   .bg-purple-light {
     background: #e5e9f2;
   }
   .grid-content {
     border-radius: 4px;
     min-height: 36px;
   }
   
     .el-carousel__item h3 {
       color: #475669;
       font-size: 14px;
       opacity: 0.75;
       line-height: 200px;
       margin: 0;
     }
     
     .el-carousel__item:nth-child(3n) {
       background-color: #eaeaeb;
	   filter:alpha(Opacity=90);-moz-opacity:0.9;opacity: 0.9;
	   box-shadow:60px 40px 40px 20px #bebebe,
					-60px 40px 40px 20px #bebebe;
     }
     
     .el-carousel__item:nth-child(3n+1) {
       background-color: #eaeaeb;
	   filter:alpha(Opacity=90);-moz-opacity:0.9;opacity: 0.9;
	   box-shadow:60px 40px 40px 20px #bebebe,
					-60px 40px 40px 20px #bebebe;
	   
     }
	 
	 .el-carousel__item:nth-child(3n+2) {
	   background-color: #eaeaeb;
	   filter:alpha(Opacity=90);-moz-opacity:0.9;opacity: 0.9;
	   box-shadow:60px 40px 40px 20px #bebebe,
					-60px 40px 40px 20px #bebebe;
	   
	 }
	 

</style>